<template>
  <div class="bookingRecord">
    <van-tabs v-model="activeType" sticky @click="changeTab" color="#01847F">
      <van-tab class="tabItem" title="全部" name="all">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card>
          <loading-data v-if="bookingList.length === 0 || loading" :listLength="bookingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
      <van-tab class="tabItem" title="进行中" name="going">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card>
          <loading-data v-if="bookingList.length === 0 || loading" :listLength="bookingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
      <van-tab class="tabItem" title="已完成" name="joined">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card>
          <loading-data v-if="bookingList.length === 0 || loading" :listLength="bookingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
      <van-tab class="tabItem" title="已取消" name="cancel">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText" @load="onLoad">
          <booking-card v-for="(item, index) in bookingList" :key="index" :bookingData="item" @reload="reloadList"></booking-card>
          <loading-data v-if="bookingList.length === 0 || loading" :listLength="bookingList.length" :isLoading="loading" :textType="1"></loading-data>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import bookingCard from '@/components/bookingCard.vue'
import loadingData from '@/components/loadingData.vue'
import user from '@/api/user'
export default {
  components: {
    bookingCard,
    loadingData
  },
  data() {
    return {
      activeType: 'all',
      bookingList: [
        {
          id: '1',
          name: '总部-3D试衣间',
          imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
          time: '2020-11-09 15:00-18:00',
          address: '东方明珠花苑明福楼千誉二楼',
          serviceItem: '参观、洽谈',
          peopleNum: '6人',
          other: '需要会议室、需要茶室',
          state: 'booking',
          bookingState: 'audit'
        },
        {
          id: '2',
          name: '5G商学院',
          imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
          time: '2020-11-10 15:00-18:00',
          address: '东方明珠花苑明居楼广州市千誉贸易有限公司5G商学院',
          serviceItem: '参观、洽谈、会议',
          peopleNum: '6人',
          other: '需要会议室、需要茶室',
          state: 'done',
          bookingState: ''
        },
        {
          id: '1',
          name: '总部-3D试衣间',
          imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
          time: '2020-11-09 15:00-18:00',
          address: '东方明珠花苑明福楼千誉二楼',
          serviceItem: '参观、洽谈',
          peopleNum: '6人',
          other: '需要会议室、需要茶室',
          state: 'cancel',
          bookingState: ''
        },
        {
          id: '2',
          name: '5G商学院',
          imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
          time: '2020-11-10 15:00-18:00',
          address: '东方明珠花苑明居楼广州市千誉贸易有限公司5G商学院',
          serviceItem: '参观、洽谈、会议',
          peopleNum: '6人',
          other: '需要会议室、需要茶室',
          state: 'booking',
          bookingState: 'approved'
        }
      ],
      loading: false,
      finished: false,
      finishedText: '',
      page: 1,
      lastPage: 0
    }
  },
  methods: {
    changeTab(name, title) {
      this.activeType = name
      this.page = 1
      this.getListData()
    },
    onLoad() {
      this.getListData(true)
    },
    reloadList() {
      this.page = 1
      this.getListData()
    },
    getListData(isNextPage) {
      if (!this.$tools.isNullOrEmpty(isNextPage)) {
        ++this.page
      }
      this.loading = true
      user.getBookingList({type: this.activeType, page: this.page}).then((res) => {
        this.lastPage = res.data.last_page
        res.data.data.forEach((item, index) => {
          item.bookingTime = item.date_text + ' ' + item.starttime_text + '-' + item.endtime_text
          item.bookingAdd = item.city + item.address
        })
        if (!this.$tools.isNullOrEmpty(isNextPage)) {
          this.bookingList = this.bookingList.concat(res.data.data)
        } else {
          this.bookingList = res.data.data
        }

        this.loading = false
        if (res.data.total === 0) {
          this.finishedText = ''
        }
        if (res.data.current_page === res.data.last_page || res.data.last_page === 0) {
          this.finished = true
          this.finishedText = '没有更多了'
        }
      })
    },
    checkDetails(id) {
      this.$router.push({
        path: `/bookingInfo/${id}`
      })
    },
    cancelBooking(id) {
      console.log(id)
    }
  },
  mounted() {
    this.getListData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bookingRecord {
  .tabItem {
    padding: 0.8rem 1.4rem;
    box-sizing: border-box;
    height: 100%;
  }
}
</style>
